<template>
  <Box title="换芯记录" style="margin-top: 40px">
    <div class="list-header">
      <span>MIES码</span>
      <span>安装日期</span>
      <span>换芯次数</span>
      <span style="flex: 1.42">换芯时间</span>
    </div>
    <ScrollBoard v-if="list && list.length" class="collection">
      <div class="list">
        <div class="item" :key="index" v-for="(item, index) in list">
          <span> {{ item.mes }} </span>
          <span> {{ item.installDate }} </span>
          <span> {{ item.num }} </span>
          <span style="flex: 1.42"> {{ item.chipTime }} </span>
        </div>
      </div>
    </ScrollBoard>
    <div class="collection" v-else></div>
  </Box>
</template>

<script setup lang="ts">
import Box from '@/components/Box.vue'
import { ref } from 'vue'
import ScrollBoard from '@/components/ScrollBoard.vue'
import { getRecordChipAndNotice } from '@/api'
import useInterval from '@/hooks/useInterval'
import config from '@/utils/config'
const list: any = ref([])

useInterval(() => {
  getRecordChipAndNotice({}).then((res: any) => {
    list.value = res.chips
  })
}, config.internalTime)
</script>

<style lang="scss" scoped>
.collection {
  width: 100%;
  height: 220px;
  min-height: 220px;

  overflow: hidden;
  .list {
    // 表格
    .item {
      display: flex;
      align-items: center;
      padding: 0 0px;
      margin-top: 2px;
      // border: 1px solid #0c2c5f;

      span {
        flex: 1;
        // border-right: 1px solid #0c2c5f;
        padding: 10px 12px;

        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        color: #fff;
        font-size: 14px;
        background-color: rgba(#142c55, 0.5);
      }
      span:first-child {
        flex: 1.4;
      }
      span:last-child {
        border-right: none;
      }
    }
  }
}
.list-header {
  display: flex;
  align-items: center;
  padding: 0 0px;
  color: #fff;
  // border: 1px solid rgba(255, 255, 255, 0.1);
  span {
    flex: 1;
    // border-right: 1px solid rgba(255, 255, 255, 0.1);
    padding: 4px 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #fff;
    background-color: #0c2b6c;
    font-size: 14px;
  }
  span:first-child {
    flex: 1.4;
  }
  span:last-child {
    border-right: none;
  }
}
</style>
